<template>
  <van-popup v-model="show">
    <div class="box1">
      <ul>
        <li class="box1_item">
          <p>破损一</p>
          <div class="showPhotos">
            <div v-for="(item, index) in fileList1" :key="index">
              <img
                @click="previewImg(fileList1, index)"
                :src="item.url"
                alt="图片"
              />
            </div>
          </div>
        </li>
        <li class="box1_item">
          <p>破损二</p>
          <div class="showPhotos">
            <div v-for="(item, index) in fileList2" :key="index">
              <img
                @click="previewImg(fileList2, index)"
                :src="item.url"
                alt="图片"
              />
            </div>
          </div>
        </li>
        <li class="box1_item">
          <p>破损三</p>
          <div class="showPhotos">
            <div v-for="(item, index) in fileList3" :key="index">
              <img
                @click="previewImg(fileList3, index)"
                :src="item.url"
                alt="图片"
              />
            </div>
          </div>
        </li>
        <li class="box1_item">
          <p>破损四</p>
          <div class="showPhotos">
            <div v-for="(item, index) in fileList4" :key="index">
              <img
                @click="previewImg(fileList4, index)"
                :src="item.url"
                alt="图片"
              />
            </div>
          </div>
        </li>
        <li class="box1_item">
          <p>破损五</p>
          <div class="showPhotos">
            <div v-for="(item, index) in fileList5" :key="index">
              <img
                @click="previewImg(fileList5, index)"
                :src="item.url"
                alt="图片"
              />
            </div>
          </div>
        </li>

          <li class="box1_item">
          <p>破损六</p>
          <div class="showPhotos">
            <div v-for="(item, index) in fileList6" :key="index">
              <img
                @click="previewImg(fileList6, index)"
                :src="item.url"
                alt="图片"
              />
            </div>
          </div>
        </li>
          <li class="box1_item">
          <p>破损七</p>
          <div class="showPhotos">
            <div v-for="(item, index) in fileList7" :key="index">
              <img
                @click="previewImg(fileList7, index)"
                :src="item.url"
                alt="图片"
              />
            </div>
          </div>
        </li>
          <li class="box1_item">
          <p>破损八</p>
          <div class="showPhotos">
            <div v-for="(item, index) in fileList8" :key="index">
              <img
                @click="previewImg(fileList8, index)"
                :src="item.url"
                alt="图片"
              />
            </div>
          </div>
        </li>
          <li class="box1_item">
          <p>破损九</p>
          <div class="showPhotos">
            <div v-for="(item, index) in fileList9" :key="index">
              <img
                @click="previewImg(fileList9, index)"
                :src="item.url"
                alt="图片"
              />
            </div>
          </div>
        </li>
          <li class="box1_item">
          <p>破损十</p>
          <div class="showPhotos">
            <div v-for="(item, index) in fileList10" :key="index">
              <img
                @click="previewImg(fileList10, index)"
                :src="item.url"
                alt="图片"
              />
            </div>
          </div>
        </li>
      </ul>
      <!-- 按钮保存 -->
      <div class="buttom">
        <van-button
          type="primary"
          @click="show = false"
          block
          round
          size="normal"
          >关闭</van-button
        >
      </div>
    </div>
  </van-popup>
</template>

<script>
import Vue from "vue";
import { base } from "@/utils/config";
import { Button, Popup, ImagePreview } from "vant";

import { getDamageInfo } from "./../services/api";
Vue.use(Popup);
Vue.use(ImagePreview);
Vue.use(Button);
export default {
  data() {
    return {
      show: false,
      base: base,
      fileList1: [],
      fileList2: [],
      fileList3: [],
      fileList4: [],
      fileList5: [],
      fileList6: [],
      fileList7: [],
      fileList8: [],
      fileList9: [],
      fileList10: [],
    };
  },
  methods: {
    // 获取图片详情
    getDamageInfo(e) {
      getDamageInfo({ damageInfoId: e }).then((res) => {
        if (res) {
          this.fileList1 =
            res.damageInfoFileGroupByType[1] &&
            res.damageInfoFileGroupByType[1].map((item) => ({
              url: base + "/" + item.fileUrl,
              isImage: true,
            }));
          this.fileList2 =
            res.damageInfoFileGroupByType[2] &&
            res.damageInfoFileGroupByType[2].map((item) => ({
              url: base + "/" + item.fileUrl,
              isImage: true,
            }));
          this.fileList3 =
            res.damageInfoFileGroupByType[3] &&
            res.damageInfoFileGroupByType[3].map((item) => ({
              url: base + "/" + item.fileUrl,
              isImage: true,
            }));
          this.fileList4 =
            res.damageInfoFileGroupByType[4] &&
            res.damageInfoFileGroupByType[4].map((item) => ({
              url: base + "/" + item.fileUrl,
              isImage: true,
            }));
          this.fileList5 =
            res.damageInfoFileGroupByType[5] &&
            res.damageInfoFileGroupByType[5].map((item) => ({
              url: base + "/" + item.fileUrl,
              isImage: true,
            }));
          this.fileList6 =
            res.damageInfoFileGroupByType[6] &&
            res.damageInfoFileGroupByType[6].map((item) => ({
              url: base + item.fileUrl,
              isImage: true,
            }));
          this.fileList7 =
            res.damageInfoFileGroupByType[7] &&
            res.damageInfoFileGroupByType[7].map((item) => ({
              url: base + item.fileUrl,
              isImage: true,
            }));
          this.fileList8 =
            res.damageInfoFileGroupByType[8] &&
            res.damageInfoFileGroupByType[8].map((item) => ({
              url: base + item.fileUrl,
              isImage: true,
            }));
          this.fileList9 =
            res.damageInfoFileGroupByType[9] &&
            res.damageInfoFileGroupByType[9].map((item) => ({
              url: base + item.fileUrl,
              isImage: true,
            }));
          this.fileList10 =
            res.damageInfoFileGroupByType[10] &&
            res.damageInfoFileGroupByType[10].map((item) => ({
              url: base + item.fileUrl,
              isImage: true,
            }));
          this.show = true;
        }
      });
    },
    // 图片预览
    previewImg(arry, index) {
      ImagePreview({
        images: arry.map((item) => item.url),
        startPosition: index,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.van-popup {
  background-color: rgba(0, 0, 0, 0);
}

.box1 {
  width: 100vw;
  height: 100vh;
  background-color: #eaedf0;
  padding: 15px 10px;
  box-sizing: border-box;
  overflow: auto;
  padding-bottom: 100px;
  .box1_item {
    width: 100%;
    margin-bottom: 20px;
    & > p {
      font-size: 15px;
      text-align: center;
      font-weight: 500;
      color: #333333;
      line-height: 40px;
    }
    & > div {
      width: 100%;
      overflow: hidden;
      background-color: #fff;
      border-radius: 10px;
      padding: 10px 2px 2px 10px;
      box-sizing: border-box;
    }
    & > .showPhotos {
      width: 100%;
      overflow: hidden;
      padding: 10px;
      box-sizing: border-box;
      & > div {
        width: 29%;
        height: 100px;
        float: left;
        border-radius: 10px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f5f5f5;
        margin: 5px 2%;
        box-sizing: border-box;
        img {
          width: 100%;
          display: block;
        }
        img.add {
          width: 30px;
        }
      }
    }
  }
  .buttom {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 10px;
    box-sizing: border-box;
    button {
      background-color: #f29d12;
      border-color: #f29d12;
    }
  }
}
</style>